<!--下拉菜单工具栏 -->
<template>
  <div>
    <div class="panel_btn" @click="displayPanel" ><Icon type="ios-arrow-forward"></Icon></div>
    <div class="panel_body " :class="mainShow">
<!--      <Select v-model="customMap" placeholder="地图选择" :style="{width:'120px'}" @on-change="">
        <Option v-for="item in customMaps" :value="item.name" :key="item.name">{{ item.desc }}</Option>
      </Select>-->

      <Dropdown  @on-click="mapchangeClick">
        <Button type="text" size="small" >{{ customMap }}<Icon type="ios-arrow-down"></Icon></Button>
        <DropdownMenu slot="list">

          <DropdownItem :name="item.name" v-for="item in customMaps" :key="item.name" >{{ item.desc }}</DropdownItem>
<!--
          <DropdownItem v-if="!item.sub" :name="item.name" v-for="item in customMaps">{{ item.desc }}</DropdownItem>
          <Dropdown v-if="item.sub" :name="item.name" v-for="item in customMaps" placement="right-start">
            <DropdownItem :name="item.name">{{ item.desc }}<Icon type="ios-arrow-forward"></Icon></DropdownItem>
            <DropdownMenu slot="list">
              <DropdownItem :name="item1.name" v-for="item1 in item.sub">{{ item1.desc }}</DropdownItem>
            </DropdownMenu>
          </Dropdown>-->

        </DropdownMenu>
      </Dropdown>


      <Dropdown style="margin-left: 2px">
        <Button type="text" size="small">绘制图形<Icon type="ios-arrow-down"></Icon>
        </Button>
        <DropdownMenu slot="list">
          <DropdownItem>直线</DropdownItem>
          <DropdownItem>多边形</DropdownItem>
          <DropdownItem>园形</DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <Button type="text" size="small">测距</Button>
    </div>

    <div class="map-type-panel">
      <div class="main-panel" >
        <Button v-if="item.visible" :disabled="item.disabled" type="text" size="small" @click="mapTypeBtnClick(item.name)"
                v-for="item in mapTypeBtn" :key="item.name" >
          {{item.desc}}
        </Button>

<!--        <Button v-if="mapTypeBtn.WX" type="text" size="small">卫星</Button>
        <Button v-if="mapTypeBtn.YX" type="text" size="small">影像</Button>
        <Button v-if="mapTypeBtn.DX" type="text" size="small">地形</Button>
        <Button v-if="mapTypeBtn.JD" type="text" size="small">街景</Button>-->
      </div>
    </div>

    <div class="draw-end-panel">
      <div class="main-panel" >
        <Button v-if="drawing.drawing" type="primary" style="margin-top:5px" shape="circle">{{drawing.name}}</Button>
        <Button v-if="drawing.drawing" type="primary" style="margin-top:5px" shape="circle">{{drawing.name}}</Button>
      </div>
    </div>
  </div>
</template>
<script>
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import {View} from "ol";
import  "ol/ol.css";
import {changeSource} from './MapSource';

export default {
  props:{
    map:{
      type:Object,
    },
    mapElement:{
      type:String
    },
    drawing: {
      type:Object,
      default:{drawing:false,name:"结束"}
    }
  },
  data(){
    return {
      display:true,
      mapTypeBtn:[
        {id:1,name:"WX",desc:'卫星',disabled:false,visible:false,sourceName:""},
        {id:2,name:"YX",desc:'影像',disabled:false,visible:false,sourceName:""},
        {id:3,name:"DX",desc:'地形',disabled:false,visible:false,sourceName:""},
        {id:4,name:"JD",desc:'街道',disabled:false,visible:false,sourceName:""},
        {id:5,name:"SL",desc:'矢量',disabled:false,visible:false,sourceName:""},
        {id:6,name:"vec",desc:'标准',disabled:false,visible:false,sourceName:""},
        {id:7,name:"gray",desc:'灰色',disabled:false,visible:false,sourceName:""},
        {id:8,name:"blue",desc:'蓝色',disabled:false,visible:false,sourceName:""},
        {id:9,name:"warm",desc:'暖色',disabled:false,visible:false,sourceName:""},
        {id:10,name:"china",desc:'中国',disabled:false,visible:false,sourceName:""},
        {id:11,name:"Hydro",desc:'水系',disabled:false,visible:false,sourceName:""},
        {id:12,name:"green",desc:'植被',disabled:false,visible:false,sourceName:""},
      ],
      customMap:'地图选择...',
      customMaps:[
        {id:1,name:'GEOQ',desc:'智图',minZoom:3,maxZoom:18,
          sub:[
            {name:'GEOQvec',desc:'标准',type:"vec"},
            {name:'GEOQgray',desc:'灰色',type:"gray"},
            {name:'GEOQblue',desc:'蓝色',type:"blue"},
            {name:'GEOQwarm',desc:'暖色',type:"warm"},
            {name:'GEOQchina',desc:'中国',type:"china"},
            {name:'GEOQHydro',desc:'水系',type:"Hydro"},
            {name:'GEOQgreen',desc:'植被',type:"green"},
          ]
        },
        {id:2,name:'Baidu',desc:'百度地图',minZoom:3,maxZoom:18},
        {id:3,name:'TianDi',desc:'天地图',minZoom:3,maxZoom:18,
          sub:[
            {name:'TianDiJD',desc:'街道',type:"JD"},
            {name:'TianDiWX',desc:'卫星',type:"WX"},
            {name:'TianDiDX',desc:'地形',type:"DX"},
          ]
        },
        {id:4,name:'GaoDe',desc:'高德地图',minZoom:3,maxZoom:18,
          sub:[
            {name:'GaoDeJD',desc:'街道',type:"JD"},
            {name:'GaoDeYX',desc:'影像',type:"YX"},
            {name:'GaoDeSl',desc:'矢量',type:"SL"},
          ]
        },
        {id:5,name:'Google',disabled:true,desc:'谷歌地图',minZoom:3,maxZoom:21,
          sub:[
            {name:'GoogleJD',desc:'街道',type:"JD"},
            {name:'GoogleYX',desc:'影像',type:"YX"},
          ]
        },
        {id:6,name:'Arcgis',desc:'ArcGis',minZoom:3,maxZoom:18,
          sub:[
            {name:'ArcgisJD',desc:'街道',type:"JD"},
            {name:'ArcgisYX',desc:'影像',type:"YX"},
          ]
        },
        {id:7,name:'OSM',desc:'OSM',minZoom:3,maxZoom:18},
        //{name:'BingMaps',desc:'必应地图'},
      ],
    }
  },
  computed: {
    mainShow: function (){
      return {
        'main-show': this.display,
        'main-hide': !this.display
      }
    }
  },
  methods:{
    mapTypeBtnClick(name){
      console.log(name);
      for(let i in this.mapTypeBtn){
        if (name == this.mapTypeBtn[i].name){
          /** 换地图 */
          this.mapTypeBtn[i].disabled = true;
          changeSource(this.mapElement,this.map,this.mapTypeBtn[i].sourceName);
        }else{
          this.mapTypeBtn[i].disabled = false;
        }
      }
    },
    displayPanel(){
      this.display = !this.display;
    },
    mapchangeClick(name){
      for(let i in this.mapTypeBtn){
        /** 隐藏所有 */
        this.mapTypeBtn[i].visible = false;
        this.mapTypeBtn[i].disabled = false;
      }

      for(let i in this.customMaps){
        if (this.customMaps[i].name == name){
          this.customMap = this.customMaps[i].desc;
          if (!!this.customMaps[i].sub){
            for(let j in this.customMaps[i].sub){
              for(let k in this.mapTypeBtn){
                if (this.customMaps[i].sub[j].type == this.mapTypeBtn[k].name){
                  this.mapTypeBtn[k].visible = true;
                  this.mapTypeBtn[k].sourceName = this.customMaps[i].sub[j].name;
                  /** 默认选 第一个地图 */
                  if (j==0){
                    this.mapTypeBtn[k].disabled = true;
                    changeSource(this.mapElement,this.map,this.customMaps[i].sub[0].name);
                  }
                }
               }
            }
          }else{
            /** 没有 sub */
            changeSource(this.mapElement,this.map,name);
          }
          break;
        }
      }
    },



/*    changeMap(){
      const that = this;
      let layers = [
        new TileLayer({
          source: new OSM(),
        })];
      let view = new View({
        projection: "EPSG:4326",
        center: [114.236262, 22.677236],
        zoom: 10,
      });

      //移除老的layers
      let lastLayers = this.map.getLayerGroup().getLayers().getArray();
      for(let i=lastLayers.length-1;i>=0;i--){
        that.map.removeLayer(lastLayers[i]);
      }
      that.map.setLayers(layers);
      that.map.setView(view);
    }*/
  }
}
</script>

<style lang="less">
.panel_btn{
  position: fixed;
  z-index: 11;
  width: 20px;
  height: 28px;
  top: 20px;
  right: 0px;
  background-color: rgb(5, 31, 112);
  color: #FFFFFF;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border: #eeeeee;
  border-block: #ffcc33;
  cursor: pointer;
}
.panel_body {
  display: flex;
  position: fixed;
  z-index: 10;
  width: 280px;
  height: 28px;
  top: 20px;
  right: 17px;
  background-color: rgb(5, 31, 112);
  color: #FFFFFF;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  cursor: pointer;
  .ivu-btn-text{
    color: #aaaaaa;
  }
  .ivu-select{
    color: #FFFFFF;
    .ivu-select-selection{
      background-color: rgb(5, 31, 112);
      border-color: rgb(5, 31, 112);
      height: 28px;
    }
  }
}
.main-show {
  opacity: 1;
}
.main-hide {
  opacity: 0;
}
/* 地图类型 */
.map-type-panel{
  .main-panel {
    position: fixed;
    z-index: 10;
    //left: 0;
    right: 0;
    top: 50px;
    width: 48px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    /*background: #2d8cf0;*/
    background-color: rgb(5, 31, 112);
    transition: all 0s;
  }
  height: 100px;
  width: 48px;
}

/* 结束按钮容器 */
.draw-end-panel{
  .main-panel {
    position: fixed;
    z-index: 10;
    left: 0;
    //right: 0;
    top: 50px;
    height: 48px;
    border-bottom-right-radius: 5px ;
    border-top-right-radius: 5px;
    /*background: #2d8cf0;*/
    background-color: rgb(5, 31, 112);
    /** 渐变 */
    transition: all 0s;
    .ivu-btn-primary {
      color: #fff;
      background-color: rgb(5, 31, 112);
      //border-color: #2d8cf0;
      border-color: #0e3156;
    }
  }
  height: 48px;
  width: 48px;
}

</style>
